<template>
  <div class="app-container">
    <!-- 审批信息 -->
    <el-card class="box-card" v-loading="processInstanceLoading"
      v-for="(item, index) in runningTasks" :key="index">
      <div slot="header" class="clearfix">
        <!-- <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span> -->
        <span class="title_style"><svg-icon icon-class="base_info" class="svg_icon_style" />审批任务【{{
          item.name }}】</span>
      </div>
      <el-col :span="16">
        <el-form :ref="'form' + index" :model="auditForms[index]" :rules="auditRule"
          label-width="120px" :label-position="labelPosition">
          <el-row>
            <el-col :span="12">
              <el-form-item label="流程名" v-if="processInstance && processInstance.name">
                {{ processInstance.name }}
              </el-form-item></el-col>
            <el-col :span="12">
              <el-form-item label="流程发起人" v-if="processInstance && processInstance.startUser">
                {{ processInstance.startUser.nickname }}
                <el-tag type="info" size="mini">{{
                  processInstance.startUser.deptName
                  }}</el-tag>
              </el-form-item></el-col>
          </el-row>

          <!-- <el-form-item label="流程表单"> -->
          <NodeForm @change="handleNodeFormChange" :task="item" />
          <!-- </el-form-item> -->

          <el-form-item label="审批建议" prop="reason">
            <el-input type="textarea" v-model="auditForms[index].reason" placeholder="请输入审批建议" />
          </el-form-item>
          <el-form-item style="font-size: 14px" label="审批结果">
            <el-button icon="el-icon-edit-outline" type="success" size="mini"
              @click="handleAudit(item, true)">通过
            </el-button>
            <el-button icon="el-icon-circle-close" type="danger" size="mini"
              @click="handleAudit(item, false)">不通过
            </el-button>
            <el-button v-show="processConfigBtn.transferBtn" icon="el-icon-edit-outline"
              type="primary" size="mini" @click="handleUpdateAssignee(item)">转办
            </el-button>
            <el-button v-show="processConfigBtn.addSignBtn" icon="el-icon-edit-outline"
              type="primary" size="mini" @click="handleAdd(item)">协助办理</el-button>
            <el-button v-show="processConfigBtn.fallbackBtn" icon="el-icon-refresh-left"
              type="warning" size="mini" @click="handleBack(item)">回退</el-button>
            <!-- <el-button icon="el-icon-edit-outline" type="primary" size="mini" @click="handleDelegate(item)">委派</el-button> -->
            <!--<el-button icon="el-icon-refresh-left" type="warning" size="mini" @click="handleBack(item)">退回</el-button> -->
          </el-form-item>
        </el-form>
      </el-col>
    </el-card>
    <!-- 申请信息 -->
    <!-- v-if="
        detailForm.fields.length > 0 && processInstance.formVariables !== null
      " -->
    <el-card class="box-card" v-loading="processInstanceLoading">
      <div slot="header" class="box-card-header">
        <!-- <span class="el-icon-document"
          >申请信息【{{ processInstance.name }}】</span
        > -->
        <span class="title_style"><svg-icon icon-class="base_info" class="svg_icon_style" />申请信息【{{
          processInstance.name }}】</span>
        <export-form :form-type="formType" :process-instance="processInstance" />
      </div>
      <el-col v-if="formType === 10 && detailForm.fields.length > 0" :span="16">
        <div>
          <parser :key="new Date().getTime()" :form-conf="detailForm" />
        </div>
      </el-col>
      <div v-else-if="
        this.processInstance.processDefinition &&
        this.formType === 20
      ">
        <router-link :to="customViewPath">
          <el-button type="primary">点击查看</el-button>
        </router-link>
      </div>
    </el-card>

    <!-- 审批记录 -->
    <el-card class="box-card" v-loading="tasksLoad">
      <div slot="header" class="clearfix">
        <!-- <span class="el-icon-picture-outline">审批记录</span> -->
        <span class="title_style"><svg-icon icon-class="base_info"
            class="svg_icon_style" />审批记录</span>
      </div>
      <el-col :span="16">
        <div class="block">
          <el-timeline>
            <el-timeline-item v-for="(item, index) in tasks" :key="index"
              :icon="getTimelineItemIcon(item)" :type="getTimelineItemType(item)">
              <p style="font-weight: 700">任务：{{ item.name }}</p>
              <el-card :body-style="{ padding: '10px' }">
                <label v-if="item.assigneeUser" style="font-weight: normal; margin-right: 30px">
                  审批人：{{ item.assigneeUser.nickname }}
                  <el-tag type="info" size="mini">{{
                    item.assigneeUser.deptName
                    }}</el-tag>
                </label>
                <label style="font-weight: normal" v-if="item.createTime">创建时间：</label>
                <label style="color: #8a909c; font-weight: normal">{{
                  parseTime(item.createTime)
                  }}</label>
                <label v-if="item.endTime"
                  style="margin-left: 30px; font-weight: normal">审批时间：</label>
                <label v-if="item.endTime" style="color: #8a909c; font-weight: normal">
                  {{ parseTime(item.endTime) }}</label>
                <label v-if="item.durationInMillis"
                  style="margin-left: 30px; font-weight: normal">耗时：</label>
                <label v-if="item.durationInMillis" style="color: #8a909c; font-weight: normal">
                  {{ getDateStar(item.durationInMillis) }}
                </label>
                <p v-if="item.reason">
                  <el-tag :type="getTimelineItemType(item)">{{
                    item.reason
                    }}</el-tag>
                </p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>
    </el-card>

    <!-- 高亮流程图 -->
    <el-card class="box-card" v-loading="processInstanceLoading">
      <div slot="header" class="clearfix">
        <!-- <span class="el-icon-picture-outline">流程图</span> -->
        <span class="title_style">
          <svg-icon icon-class="base_info" class="svg_icon_style" />流程图
        </span>
      </div>
      <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm"
        :activityData="activityList" :processInstanceData="processInstance" :taskData="tasks" />
    </el-card>

    <!-- 对话框(转派审批人) -->
    <el-dialog title="转派审批人" :visible.sync="updateAssignee.open" width="500px" append-to-body>
      <el-form ref="updateAssigneeForm" :model="updateAssignee.form" :rules="updateAssignee.rules"
        label-width="110px">
        <el-form-item label="新审批人" prop="assigneeUserId">
          <el-select v-model="updateAssignee.form.assigneeUserId" clearable style="width: 100%"
            filterable :filter-method="userFilter">
            <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
              :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateAssigneeForm">确 定</el-button>
        <el-button @click="cancelUpdateAssigneeForm">取 消</el-button>
      </div>
    </el-dialog>
    <!--对话框（委派）-->
    <el-dialog title="委派审批人" :visible.sync="addSignature.open" width="500px" append-to-body>
      <el-form ref="addSignatureForm" :model="addSignature.form" :rules="addSignature.rules"
        label-width="110px">
        <el-form-item label="委派人" prop="userId">
          <el-select v-model="addSignature.form.userId" clearable style="width: 100%" filterable
            :filter-method="userFilter">
            <el-option v-for="item in userOptions" :key="parseInt(item.id)" :label="item.nickname"
              :value="parseInt(item.id)" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddSignatureForm">确 定</el-button>
        <el-button @click="cancelAddSignatureForm">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
import store from "@/store";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser";
import { getProcessInstance } from "@/api/bpm/processInstance";
import {
  approveTask,
  getTaskListByProcessInstanceId,
  rejectTask,
  updateTaskAssignee,
  addSignTask,
  fallback,
  saveNodeFormData,
  getTaskProcessConfig,
} from "@/api/bpm/task";
import { getDate } from "@/utils/dateUtils";
import { listSimpleUsers } from "@/api/system/user";
import { getActivityList } from "@/api/bpm/activity";

import NodeForm from "./NodeForm.vue";
import ExportForm from "./export-form.vue";

// 流程实例的详情页，可用于审批
export default {
  name: "ProcessInstanceDetail",
  components: {
    Parser,
    NodeForm,
    ExportForm,
  },
  data() {
    return {
      labelPosition: "right", //表单标签居左设置
      // 遮罩层
      processInstanceLoading: true,
      // 流程实例
      id: undefined, // 流程实例的编号
      processInstance: {},

      // 流程表单详情
      detailForm: {
        fields: [],
      },

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },
      activityList: [],

      // 审批记录
      tasksLoad: true,
      tasks: [],

      // 审批表单
      runningTasks: [],
      auditForms: [],
      auditRule: {
        reason: [
          { required: true, message: "审批建议不能为空", trigger: "blur" },
        ],
      },
      nodeFormData: "",

      // 转派审批人
      allUserOptions: [],
      userOptions: [],
      updateAssignee: {
        open: false,
        form: {
          assigneeUserId: undefined,
        },
        rules: {
          assigneeUserId: [
            { required: true, message: "新审批人不能为空", trigger: "change" },
          ],
        },
      },

      //加签审批人
      addSignature: {
        open: false,
        form: {
          userId: undefined,
        },
        rules: {
          userId: [
            {
              required: true,
              message: "委派审批人不能为空",
              trigger: "change",
            },
          ],
        },
      },

      // 数据字典
      categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY),
      //审核按钮配置
      processConfigBtn: {
        addSignBtn: false,
        transferBtn: false,
        fallbackBtn: false,
      },
    };
  },
  computed: {
    customViewPath() {
      const { processDefinition = {}, businessKey = '', id = '' } = this.processInstance;
      return processDefinition?.formCustomViewPath +
        '?id=' +
        businessKey + '&processInstanceId=' + id

    },
    formType() {
      if (this.processInstance.processDefinition) {
        return this.processInstance.processDefinition.formType;
      }
      return 0;
    }
  },
  created() {
    this.id = this.$route.query.id;
    if (!this.id) {
      this.$message.error("未传递 id 参数，无法查看流程信息");
      return;
    }
    this.getDetail();

    // 获得用户列表
    this.allUserOptions = [];
    listSimpleUsers().then((response) => {
      this.allUserOptions.push(...response.data);
      this.userFilter();
    });
  },
  methods: {
    // 更新最新数据
    handleNodeFormChange(val) {
      this.nodeFormData = val;
    },

    /** 获得流程实例 */
    getDetail() {
      // 获得流程实例相关
      this.processInstanceLoading = true;
      getProcessInstance(this.id).then((response) => {
        if (!response.data) {
          this.$message.error("查询不到流程信息！");
          return;
        }
        // 设置流程信息
        this.processInstance = response.data;

        // 设置表单信息

        if (
          this.formType === 10 &&
          this.processInstance.processDefinition.formId !== 0
        ) {
          this.detailForm = {
            ...JSON.parse(this.processInstance.processDefinition.formConf),
            disabled: true, // 表单禁用
            formBtns: false, // 按钮隐藏
            fields: decodeFields(
              this.processInstance.processDefinition.formFields,
              this.processInstance.formVariables
            ),
          };
          // console.log("QWE1:", this.detailForm);
          // 设置表单的值
          /* if (this.processInstance.formVariables !== null) {
            this.detailForm.fields.forEach((item) => {
              const val = this.processInstance.formVariables[item.__vModel__];
              if (val) {
                if (
                  item.__config__.tag == "el-upload" &&
                  typeof val[0] === "string"
                ) {
                  item.__config__.defaultValue = val.map((elItem) => {
                    return {
                      name: this.getFileName(elItem),
                      url: elItem,
                    };
                  });
                } else {
                  item.__config__.defaultValue = val;
                }
              }
            });
          } */
          // console.log("QWE2:", this.detailForm);
        }
        // 加载流程图
        getProcessDefinitionBpmnXML(
          this.processInstance.processDefinition.id
        ).then((response) => {
          this.bpmnXML = response.data;
        });
        // 加载活动列表
        getActivityList({
          processInstanceId: this.processInstance.id,
        }).then((response) => {
          this.activityList = response.data;
        });

        // 取消加载中
        this.processInstanceLoading = false;
      });

      // 获得流程任务列表（审批记录）
      this.tasksLoad = true;
      this.runningTasks = [];
      this.auditForms = [];
      getTaskListByProcessInstanceId(this.id).then((response) => {
        // 审批记录
        this.tasks = [];
        // 移除已取消的审批
        response.data.forEach((task) => {
          if (task.result !== 4) {
            this.tasks.push(task);
          }
        });
        // 排序，将未完成的排在前面，已完成的排在后面；
        this.tasks.sort((a, b) => {
          // 有已完成的情况，按照完成时间倒序
          if (a.endTime && b.endTime) {
            return b.endTime - a.endTime;
          } else if (a.endTime) {
            return 1;
          } else if (b.endTime) {
            return -1;
            // 都是未完成，按照创建时间倒序
          } else {
            return b.createTime - a.createTime;
          }
        });

        // 需要审核的记录
        const userId = store.getters.userId;
        this.tasks.forEach((task) => {
          if (task.result !== 1) {
            // 只有待处理才需要
            return;
          }
          if (!task.assigneeUser || task.assigneeUser.id !== userId) {
            // 自己不是处理人
            return;
          }
          //审核按钮配置
          getTaskProcessConfig(task.id).then((response) => {
            if (response.data == {} || response.data == null) return;
            let { addSignBtn, transferBtn, fallbackBtn } = response.data;
            this.processConfigBtn.addSignBtn = addSignBtn;
            this.processConfigBtn.transferBtn = transferBtn;
            this.processConfigBtn.fallbackBtn = fallbackBtn;
          });
          this.runningTasks.push({ ...task });
          this.auditForms.push({
            reason: "",
          });
        });

        // 取消加载中
        this.tasksLoad = false;
      });
    },
    // 获取文件名称
    /* getFileName(name) {
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    }, */
    /** 处理选择流程的按钮操作 **/
    handleSelect(row) {
      // 设置选择的流程
      this.selectProcessInstance = row;

      // 流程表单
      if (row.formId) {
        // 设置对应的表单
        this.detailForm = {
          ...JSON.parse(row.formConf),
          fields: decodeFields(row.formFields),
        };
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath });
        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
      }
    },
    getDateStar(ms) {
      return getDate(ms);
    },
    getTimelineItemIcon(item) {
      if (item.result === 1) {
        return "el-icon-time";
      }
      if (item.result === 2) {
        return "el-icon-check";
      }
      if (item.result === 3) {
        return "el-icon-close";
      }
      if (item.result === 4) {
        return "el-icon-remove-outline";
      }
      return "";
    },
    getTimelineItemType(item) {
      if (item.result === 1) {
        return "primary";
      }
      if (item.result === 2) {
        return "success";
      }
      if (item.result === 3) {
        return "danger";
      }
      if (item.result === 4) {
        return "info";
      }
      return "";
    },
    /** 处理审批通过和不通过的操作 */
    handleAudit(task, pass) {
      const index = this.runningTasks.indexOf(task);
      this.$refs["form" + index][0].validate((valid) => {
        if (!valid) {
          return;
        }
        const data = {
          id: task.id,
          reason: this.auditForms[index].reason,
        };
        if (pass) {
          // 保存节点表单数据
          const params = {
            taskId: task.id,
            userId: this.$store.getters.userId,
          };
          if (!this.nodeFormData) {
            approveTask(data).then((response) => {
              this.$modal.msgSuccess("审批通过成功！");
              this.getDetail(); // 获得最新详情
            });
            return;
          }
          saveNodeFormData(params, { variables: this.nodeFormData }).then(
            (resp) => {
              approveTask(data).then((response) => {
                this.$modal.msgSuccess("审批通过成功！");
                this.getDetail(); // 获得最新详情
              });
            }
          );

          // approveTask(data).then((response) => {
          //   this.$modal.msgSuccess("审批通过成功！");
          //   this.getDetail(); // 获得最新详情
          // });

          // // 保存节点表单数据
          // const params = {
          //   taskId: task.id,
          //   userId: this.$store.getters.userId
          // }
          // if(!this.nodeFormData) return
          // saveNodeFormData(params, {variables: this.nodeFormData})
        } else {
          rejectTask(data).then((response) => {
            this.$modal.msgSuccess("审批不通过成功！");
            this.getDetail(); // 获得最新详情
          });
        }
      });
    },
    /** 处理转派审批人 */
    handleUpdateAssignee(task) {
      // 设置表单
      this.resetUpdateAssigneeForm();
      this.updateAssignee.form.id = task.id;
      // 设置为打开
      this.updateAssignee.open = true;
    },
    /**委派 */
    handleAdd(task) {
      // 设置表单
      this.resetAddSignatureForm();
      this.addSignature.form.taskId = task.id;
      // 设置为打开
      this.addSignature.open = true;
    },
    /** 重置委派审批人 */
    resetAddSignatureForm() {
      this.addSignature.form = {
        taskId: undefined,
        userId: undefined,
      };
      this.resetForm("addSignatureForm");
    },
    /** 提交委派人 */
    submitAddSignatureForm() {
      this.$refs["addSignatureForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        addSignTask(this.addSignature.form).then((response) => {
          this.$modal.msgSuccess("委派成功！");
          this.addSignature.open = false;
          this.getDetail(); // 获得最新详情
        });
      });
    },
    /** 取消加签 */
    cancelAddSignatureForm() {
      this.addSignature.open = false;
      this.resetAddSignatureForm();
    },
    /** 提交转派审批人 */
    submitUpdateAssigneeForm() {
      this.$refs["updateAssigneeForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        updateTaskAssignee(this.updateAssignee.form).then((response) => {
          this.$modal.msgSuccess("转派任务成功！");
          this.updateAssignee.open = false;
          this.getDetail(); // 获得最新详情
        });
      });
    },
    /** 取消转派审批人 */
    cancelUpdateAssigneeForm() {
      this.updateAssignee.open = false;
      this.resetUpdateAssigneeForm();
    },
    /** 重置转派审批人 */
    resetUpdateAssigneeForm() {
      this.updateAssignee.form = {
        id: undefined,
        assigneeUserId: undefined,
      };
      this.resetForm("updateAssigneeForm");
    },
    /** 处理审批退回的操作 */
    handleDelegate(task) {
      this.$modal.msgError("暂不支持【委派】功能，可以使用【转派】替代！");
    },
    /** 处理审批退回的操作 */
    handleBack(task) {
      //this.$modal.msgError("暂不支持【退回】功能！");
      // 可参考 http://blog.wya1.com/article/636697030/details/7296
      const index = this.runningTasks.indexOf(task);
      const data = {
        taskId: task.id,
        reason: this.auditForms[index].reason,
      };
      fallback(data).then((response) => {
        this.$modal.msgSuccess("回退成功！");
        this.getDetail(); // 获得最新详情
      });
    },

    //过滤用户数据
    userFilter(query = "") {
      let arr = this.allUserOptions.filter((item) => {
        return item.nickname.includes(query) || String(item.id) == query;
      });
      if (arr.length > 50) {
        this.userOptions = arr.slice(0, 50);
      } else {
        this.userOptions = arr;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.box-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 展示区，加一个遮罩防止输入点击操作
.parser-wrap {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000;
  }
}

.title_style {
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  padding: 3px 0;
  display: inline-block;
}

.svg_icon_style {
  font-size: 24px;
  margin-right: 8px;
}
</style>
